<template>
  <div class="app-container">
    <!-- 数据查询区：表单 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="订单编号" prop="orderId">
        <el-input
          v-model="queryParams.orderId"
          placeholder="请输入订单编号"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="orderStatus">
        <el-select v-model="queryParams.orderStatus" style="width: 200px" placeholder="请选择订单状态">
          <el-option label="已支付" value="已支付" />
          <el-option label="待支付" value="待支付" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery(queryRef)">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据展示区：表格 -->
    <el-table v-loading="loading" :data="orders" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="订单编号" align="center" width="150" prop="orderId" />
      <el-table-column label="餐台" align="center" prop="table.tableId" />
      <el-table-column label="订单金额" align="center" width="150" prop="orderAmount" />
      <el-table-column label="实收金额" align="center" width="150" prop="receivedAmount" />
      <el-table-column label="下单时间" align="center" width="150" prop="orderTime" />
      <el-table-column label="支付时间" align="center" width="150" prop="payTime" />
      <el-table-column label="订单状态" align="center" width="150" prop="orderStatus" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="View" size="small" @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 数据展示区：分页加载 -->
    <el-pagination
      style="margin-top: 20px"
      v-model:current-page="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      :page-sizes="[5, 10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>

    <!-- 数据查看区：查看订单对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <!--  餐台信息  -->
      <el-descriptions title="餐台信息" :column="2">
        <el-descriptions-item label="餐台编号">{{ order.table.tableId }}</el-descriptions-item>
        <el-descriptions-item label="就餐人数">{{ order.peopleCount }}</el-descriptions-item>
      </el-descriptions>

      <!--  菜品信息  -->
      <el-descriptions title="菜品信息">
        <el-descriptions-item>
          <el-table :data="order.dishes" border>
            <el-table-column label="序号" type="index" align="center"/>
            <el-table-column label="菜品名称" align="center" prop="dish.dishName" />
            <el-table-column label="数量" align="center" prop="quantity" />
            <el-table-column label="原价" align="center" prop="dish.dishPrice" />
            <el-table-column label="现价" align="center" prop="" />
            <el-table-column label="折扣" align="center" prop="" />
          </el-table>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 金额汇总 -->
    <div class="section">
      <div class="amount-summary">
        <div class="amount-item">
          <span>订单金额</span>
          <span>￥{{ order.orderAmount?.toFixed(2) }}</span>
        </div>
        <div class="amount-item">
          <span>优惠金额</span>
          <span class="discount">￥{{ order.discountAmount?.toFixed(2) }}</span>
        </div>
        <div class="amount-item total">
          <span>实收金额</span>
          <span>￥{{ order.receivedAmount?.toFixed(2) }}</span>
        </div>
      </div>
    </div>

        <!-- 整单备注 -->
        <div class="section" v-if="order.remarks">
      <div class="remarks">整单备注：{{ order.remarks }}</div>
    </div>

    <!--  订单信息  -->
    <el-descriptions title="订单信息" :column="2">
        <el-descriptions-item label="订单编号">{{ order.orderId }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">{{ order.orderStatus }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">{{ order.orderAmount }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ order.orderTime }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">{{ order.paymentMethod }}</el-descriptions-item>
        <el-descriptions-item label="支付时间">{{ order.payTime }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
/** ------------------全局导入区-------------------- */
import { ref, reactive, toRef, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { QueryParams, OrderDTO, RuleForm } from "@/views/order/management/types";
import type { TableDTO } from '@/views/store/table/types';
import { listAllOrder, listOrder, listOrderByPage, getOrderById, getOrderByStatus, addOrder, updateOrder, deleteOrder, deleteOrderBatch } from '@/api/order';

onMounted(() => {
// 挂载后加载数据
getList()
})

/** ------------------数据查询区——表单-------------------- */
// 表单实例
const queryRef = ref<FormInstance>()

// 查询
const query = reactive<QueryParams>({
  pageNum: 1,
  pageSize: 5,
  orderId: '',
  orderStatus: undefined
})
const queryParams = toRef(query)

// 数据查询区--> 查询按钮
function handleQuery() {
queryParams.value.pageNum = 1
getList()
ElMessage.success(JSON.stringify(queryParams.value))
}
// 数据查询区--> 重置按钮
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
getList()
}

/** ------------------数据展示区——表格-------------------- */

// 数据列表
const loading = ref<boolean>(false)  // table数据加载遮罩
const total = ref<number>(0) // table数据总数

const tableData = reactive<OrderDTO[]>([]) // table数据
const orders = toRef(tableData)

// 数据展示区--> 数据加载
const getList = async () => {
loading.value = true
/** 调用后端分页查询接口 */
listOrderByPage(queryParams.value).then(response => {
  orders.value = response.data.list
  total.value = response.data.total
  loading.value = false
})
}

/** ------------------数据展示区：数据选择-------------------- */

const ids = ref<String[]>([]) // 表单勾选的id
const single = ref<boolean>(false) // 勾选1个
const multiple = ref<boolean>(false) // 勾选多个

// 数据展示区--> 勾选数据
function handleSelectionChange(selection: OrderDTO[]) {
ids.value = selection.map((item:OrderDTO) => item.orderId)
single.value = selection.length == 1
multiple.value = selection.length >= 1 

}

/** ------------------数据展示区：分页加载-------------------- */
// 分页--> 修改每页数据数（5｜10｜20｜30）
function handleSizeChange(val:number) {
queryParams.value.pageSize = val
getList()
}

//分页--> 修改当前页
function handleCurrentChange(val:number) {
queryParams.value.pageNum = val
getList()
}

// 数据操作区-->抽屉查看数据
const open = ref<boolean>(false)
const title = ref<string>('');
const order = ref<OrderDTO>({
  orderId: '',
    table: {
      tableId: '',
      tableType: '',
      tableStatus: '占用'
    },
    // tableId: string
    peopleCount: 0,
    dishes: [{
      dish: {
        dishId: 1,
        dishName: '',
        dishPrice: 0,
        dishType: '单品',
        dishStatus: '上架',
        category: '',
        picture: ''
      },
      quantity: 0,
      note: ''
    }],
    orderAmount: 0,
    discountAmount: 0,
    receivedAmount: 0,
    orderTime: '',
    payTime: '',
    orderStatus: '已支付',
    paymentMethod: '微信',
    remarks: ''
})

// 数据操作区--> 查看按钮
function handleView(row: OrderDTO) {
order.value = row
title.value = '订单详情['+ row.orderId +']'
open.value = true
ElMessage.success(JSON.stringify(order.value))
}
</script>